<template>
	<view class="container-wrapper">
		<view class="tab-wrapper">
			<u-tabs :list="tablist" @click="click" :inactiveStyle="{ color: '#B0C2DB' }"
				:activeStyle="{ color: '#fff' }" lineColor="#fff" :itemStyle="{width:'50%',height:'100rpx'}"></u-tabs>
		</view>
		<registration v-if="currentIndex==0"></registration>
		<!-- 特价商品 -->
		<view class="scrollow-class" v-else>
			<view class="search-wrapper row-center pd30">
				<u-search placeholder="搜索" v-model="plate" @custom="onSearch"></u-search>
			</view>
			<scroll-view class="flex1" :style="computedStyle" :scroll-y="true" refresher-enabled="true"
				:refresher-triggered="triggered" :scroll-with-animation="true" :refresher-threshold="100"
				refresher-background="#FFF" @refresherrefresh="onRefresh" @scrolltolower="loadMore"
				@refresherrestore="onRestore">
				<historyList :list="list"></historyList>
				<!-- 上拉加载更多提示 -->
				<view class="row-center" v-if="loadMoreState==1 || loadMoreState ==2">
					<u-line color="#ddd" length="80rpx" :hairline="false"></u-line>
					<text class="load-text">{{loadMoreState == 1?'加载中...':'没有更多了'}}</text>
					<u-line color="#ddd" length="80rpx" :hairline="false"></u-line>
				</view>
			</scroll-view>
		</view>



		<u-tabbar :value="0" @getPlaceholderHeight="(height)=>{placeholderHeight = height}" :fixed="true"
			:placeholder="true" :safeAreaInsetBottom="true">
			<u-tabbar-item>
				<image class="u-page__item__slot-icon" slot="active-icon" src="/static/car-color.png"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="/static/car.png"></image>
			</u-tabbar-item>
			<u-tabbar-item @click="onRedirctTo()">
				<image class="u-page__item__slot-icon" slot="active-icon" src="/static/disposal-color.png"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="/static/disposal.png"></image>
			</u-tabbar-item>
		</u-tabbar>
		<uniLoading v-if="loadingCover" bgColor="#fff"></uniLoading>
	</view>
</template>

<script>
	import registration from './components/registration.vue';
	import historyList from './components/historyList.vue';

	import {
		queryViolationHistoryApi
	} from '@/apis/disposal.js'
	export default {
		components: {
			registration,
			historyList
		},
		data() {
			return {
				loadingCover: true,
				pageNum: 1,
				pageSize: 10,
				plate: '',
				currentIndex: 0,
				tablist: [{
					name: '违停登记',
				}, {
					name: '历史记录',
					badge: {
						value: 0,
					}
				}],
				list: [], //历史记录
				total: 0,
				triggered: false,
				freshing: false,
				loadMoreState: 0, // 0不显示 1  加载更多 2到底了
				placeholderHeight: 0,
				screenHeight: 0,
			}
		},
		onLoad() {
			setTimeout(() => {
				this.loadingCover = false;
			}, 500)
		},
		onReady() {
			this.getScreenHeight();
		},
		computed: {
			computedStyle() {
				let scrollowH = this.screenHeight - this.placeholderHeight - 50 - 55
				return `height:${scrollowH}px`;
			},
		},
		methods: {
			async queryViolationHistory() {
				try {
					let params = {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						plate: this.plate || ''
					}
					let resp = await queryViolationHistoryApi(params);
					this.total = resp.total;
					this.tablist[1].badge.value = resp.total;
					console.log(resp, 'resp')
					this.list = resp.rows || [];
				} catch (e) {
					this.list = []
					console.log(`%获取违停登记列表，${e.message},'background:orange'`)
				} finally {
					console.log('finally')
					this.loadingCover = false
				}


			},
			/**
			 * 下拉刷新
			 */
			onRefresh() {
				if (this.freshing) return;
				this.freshing = true;
				this.triggered = true
				this.rerfresh();
				setTimeout(() => {
					this.triggered = false;
					this.freshing = false;
				}, 500)
			},
			/**
			 * 下拉刷新重置
			 */
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},
			rerfresh() {
				this.pageNum = 1;
				this.queryViolationHistory();
			},
			/**
			 * 加载更多
			 */
			loadMore() {
				if (this.loadMoreState == 1 || this.loadMoreState == 2 || !this.goodsList.length) return;
				this.loadMoreState = 1;
				this.pageNum++;
				this.queryViolationHistory()
			},
			getScreenHeight() {
				// 获取系统信息
				let systemInfo = uni.getSystemInfoSync();
				// 获取屏幕高度
				let screenHeight = systemInfo.windowHeight;
				this.screenHeight = screenHeight;
			},
			// 搜索
			onSearch(plate) {
				this.pageNum = 1;
				this.plate = plate;
				this.queryViolationHistory(plate);
			},
			click(e) {
				this.currentIndex = e.index;
				if (this.currentIndex == 1) {
					this.queryViolationHistory();
				}
				console.log(e, 'eeee')
			},
			onRedirctTo() {
				this.$commonUtil.redirectTo('/disposal/index')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container-wrapper {
		width: 100%;
		height: 100%;
		background: #FAFAFA;

		.scrollow-class {
			top: 100rpx;
			width: 100%;
		}

		.search-wrapper {
			height: 55px;
		}

		.u-page__item__slot-icon {
			width: 96rpx;
			height: 96rpx;
		}

		.tab-wrapper {
			background-color: #3B67A5;
		}




	}
</style>